<template>
    <h3>组合式API</h3>
    <pre>
    单文件组件的定义方式
    1. 单选项式
    2. 单组合式
    3. 组合选项式的混合写法(不建议)
    </pre>
    <input type="button" value="组件对象输出" @click="printObj()">
    <CompositionComp username="admin" @exec="parentCallback" ref="comp"></CompositionComp>
    
</template>

<!-- <script>
// 单选项式
export default {
    
}
</script> -->
<!-- <script setup>
// 单组合式
</script> -->
<script>
// 选项式语法
import CompositionComp from "./components/CompositionComp.vue";
export default {
    components:{
        CompositionComp
    },
    methods:{
        parentCallback(arg){
            console.log("父组件方法:",arg);
        },
        printObj(){
            console.log(this.$refs.comp);
        }
    },  
    // 选项式语法
    setup(){
        // 组合式语法
    }
}
</script>

<style lang="scss" scoped>

</style>